<template>
  <el-card 
    class="article-card" 
    @click="goDerails('pc')" 
    ref="myXW"
    shadow="hover"
    :body-style="{ padding: '0' }"
  >
    <!-- 文章封面 -->
    <div class="article-cover">
      <el-image 
        :src="props.article.postlink" 
        fit="cover"
        class="cover-image"
        :preview-disabled="true"
      >
        <template #error>
          <div class="image-slot">
            <el-icon><Picture /></el-icon>
          </div>
        </template>
      </el-image>
      
      <!-- 分类标签 -->
      <div class="category-badge">
        <el-tag type="danger" size="large" round>
          <el-icon><Collection /></el-icon>
          {{ props.article.keywords }}
        </el-tag>
      </div>
      
      <!-- 悬停遮罩 -->
      <div class="hover-overlay">
        <el-button 
          type="primary" 
          size="large" 
          round
          @click.stop="goDerails('noPC')"
        >
          <el-icon><Reading /></el-icon>
          阅读文章
        </el-button>
      </div>
    </div>
    
    <!-- 文章内容 -->
    <div class="article-content">
      <!-- 标题 -->
      <h2 class="article-title">{{ props.article.title }}</h2>
      
      <!-- 标签区域 -->
      <div class="article-tags">
        <el-tag type="primary" size="small" round>
          <el-icon><Tag /></el-icon>
          {{ props.article.keywords }}
        </el-tag>
        <el-tag type="info" size="small" round>
          <el-icon><Document /></el-icon>
          {{ props.article.articleType.name }}
        </el-tag>
      </div>
      
      <!-- 描述 -->
      <div class="article-description">{{ removeHtmlTags(props.article.introduction) }}</div>
      
      <!-- 元信息 -->
      <div class="article-meta">
        <div class="meta-left">
          <div class="meta-item">
            <el-icon><View /></el-icon>
            <span>{{ props.article.readnumber || 0 }}</span>
          </div>
          <div class="meta-item">
            <el-icon><Calendar /></el-icon>
            <span>{{ formatDate(props.article.updatedAt || props.article.createdAt) }}</span>
          </div>
        </div>
        
        <div class="author-info" @click.stop="router.push({ path: `/user/${props.article.userid}/article` })">
          <el-avatar 
            :src="props.article.userInfo.avatar" 
            :size="28"
            class="author-avatar"
          >
            <el-icon><User /></el-icon>
          </el-avatar>
          <span class="author-name">{{ props.article.userInfo.user.name }}</span>
        </div>
      </div>
      
      <!-- 移动端阅读按钮 -->
      <div class="mobile-action" v-if="isPhone">
        <el-button 
          type="primary" 
          size="small" 
          round
          @click.stop="goDerails('noPC')"
        >
          <el-icon><ArrowRight /></el-icon>
          阅读更多
        </el-button>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { onMounted, inject, ref } from 'vue'
import dayjs from 'dayjs'
import { TweenMax, Power1 } from 'gsap'
import router from '../../router'
import { 
  ElCard, 
  ElImage, 
  ElTag, 
  ElIcon, 
  ElAvatar, 
  ElButton 
} from 'element-plus'
import { 
  Picture, 
  Collection, 
  Reading, 
  Document,
  View, 
  Calendar, 
  User, 
  ArrowRight 
} from '@element-plus/icons-vue'

const myXW = ref(null)
const props = defineProps({
  article: Object,
})
const isPhone = inject('isPhone')

onMounted(() => {})

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })
}

// 去除HTML标签
const removeHtmlTags = (htmlString) => {
  if (!htmlString) return ''
  return htmlString.replace(/<[^>]*>/g, '')
}

function goDerails(s) {
  if (!isPhone.value) {
    TweenMax.from(myXW.value, 1, {
      scale: 0.5,
      ease: Power1.easeOut,
    })
    TweenMax.delayedCall(0.5, myFunction, ['参数1', '参数2'])

    function myFunction() {
      router.push({ path: '/articleDetails', query: { id: props.article.id } })
    }
  } else {
    if (s == 'noPC') {
      router.push({ path: '/articleDetails', query: { id: props.article.id } })
    }
  }
}
</script>

<style scoped lang="less">
// Element Plus 蓝色主题变量
:root {
  --el-color-primary: #409eff;
  --el-color-primary-light-3: #79bbff;
  --el-color-primary-light-5: #a0cfff;
  --el-color-primary-light-7: #c6e2ff;
  --el-color-primary-light-8: #d9ecff;
  --el-color-primary-light-9: #ecf5ff;
  --el-color-primary-dark-2: #337ecc;
}

.article-card {
  cursor: pointer;
  width: 350px;
  min-width: 270px;
  height: 520px;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: #ffffff;
  border: 1px solid var(--el-color-primary-light-8);
  
  &:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(64, 158, 255, 0.15);
    border-color: var(--el-color-primary-light-5);
    
    .cover-image {
      transform: scale(1.05);
    }
    
    .hover-overlay {
      opacity: 1;
      visibility: visible;
    }
    

  }
  
  :deep(.el-card__body) {
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}

.article-cover {
  position: relative;
  height: 240px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--el-color-primary-light-9) 0%, var(--el-color-primary-light-8) 100%);
  
  .cover-image {
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease;
    
    :deep(.el-image__inner) {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  
  .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--el-color-primary-light-7) 0%, var(--el-color-primary-light-5) 100%);
    color: var(--el-color-primary);
    font-size: 48px;
  }
  
  .category-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    
    .el-tag {
      backdrop-filter: blur(10px);
      background: rgba(245, 108, 108, 0.9);
      border: none;
      color: white;
      font-weight: 600;
      padding: 8px 16px;
      
      .el-icon {
        margin-right: 6px;
      }
    }
  }
  
  .hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 3;
    
    .el-button {
      background: linear-gradient(135deg, var(--el-color-primary) 0%, var(--el-color-primary-light-3) 100%);
      border: none;
      padding: 12px 24px;
      font-weight: 600;
      box-shadow: 0 8px 20px rgba(64, 158, 255, 0.3);
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 30px rgba(64, 158, 255, 0.4);
      }
      
      .el-icon {
        margin-right: 8px;
      }
    }
  }
}

.article-content {
  flex: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.article-title {
  font-size: 20px;
  font-weight: 700;
  color: #2c3e50;
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s ease;
  
  &:hover {
    color: var(--el-color-primary);
  }
}

.article-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  
  .el-tag {
    font-size: 12px;
    padding: 4px 12px;
    border: none;
    font-weight: 500;
    
    .el-icon {
      margin-right: 4px;
      font-size: 12px;
    }
    
    &.el-tag--primary {
      background: var(--el-color-primary-light-9);
      color: var(--el-color-primary);
    }
    
    &.el-tag--info {
      background: #f4f4f5;
      color: #909399;
    }
  }
}

.article-description {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  max-height: 80px;
  opacity: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--el-color-primary-light-9);
}

.meta-left {
  display: flex;
  gap: 16px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #909399;
  font-size: 13px;
  
  .el-icon {
    font-size: 14px;
    color: var(--el-color-primary-light-3);
  }
}

.author-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 20px;
  transition: all 0.3s ease;
  
  &:hover {
    background: var(--el-color-primary-light-9);
    transform: translateX(-2px);
  }
  
  .author-avatar {
    border: 2px solid var(--el-color-primary-light-7);
    transition: border-color 0.3s ease;
  }
  
  .author-name {
    font-size: 13px;
    color: #606266;
    font-weight: 500;
  }
  
  &:hover .author-avatar {
    border-color: var(--el-color-primary);
  }
  
  &:hover .author-name {
    color: var(--el-color-primary);
  }
}

.mobile-action {
  text-align: center;
  margin-top: 16px;
  
  .el-button {
    background: linear-gradient(135deg, var(--el-color-primary) 0%, var(--el-color-primary-light-3) 100%);
    border: none;
    padding: 8px 20px;
    font-weight: 500;
    
    .el-icon {
      margin-right: 6px;
    }
  }
}

// 响应式设计
@media screen and (max-width: 768px) {
  .article-card {
    width: 100%;
    max-width: 320px;
    height: 480px;
    
    &:hover {
      transform: translateY(-4px);
    }
  }
  
  .article-cover {
    height: 200px;
  }
  
  .article-content {
    padding: 20px;
    gap: 12px;
  }
  
  .article-title {
    font-size: 18px;
  }
  
  .article-description {
    font-size: 13px;
  }
  
  .meta-item {
    font-size: 12px;
  }
  
  .author-name {
    font-size: 12px;
  }
}

@media screen and (max-width: 480px) {
  .article-card {
    height: 440px;
  }
  
  .article-cover {
    height: 180px;
  }
  
  .article-content {
    padding: 16px;
  }
  
  .article-title {
    font-size: 16px;
  }
  
  .meta-left {
    gap: 12px;
  }
}

// 动画效果
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.article-card {
  animation: fadeInUp 0.6s ease-out;
}
</style>
